import React, {Component} from 'react';
import {withRouter} from 'react-router-dom'
import './index.less'

class TabBar extends Component {
	state = {
		tabList: [{
			name: '首页',
			url: '/home',
			icon: 'https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg',
			activeIcon: 'https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg'
		}, {
			name: '我的',
			url: '/my',
			icon: 'https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg',
			activeIcon: 'https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg'
		}],
	}
	jump = (url) => {
		return () => {
			if (url !== this.props.location.pathname) {
				// push 跳转 state 参数
				// this.props.history.push({pathname: url, state: {id: 1, title: '搜索'}})
				this.props.history.push({pathname: url})
			}
		}
	}

	render() {
		const {tabList} = this.state
		const {pathname} = this.props.location
		return (
			<div className="tab_list">
				{
					tabList.map(item => {
						return (
							<div className="tab_item" key={item.url} onClick={this.jump(item.url)}>
								<img src={pathname === item.url ? item.activeIcon : item.icon} alt=""/>
								<div className={pathname === item.url ? 'active_tab_name' : 'tab_name'}>{item.name}</div>
							</div>
						)
					})
				}
			</div>
		)
	}
}

export default withRouter(TabBar);